<template>
  <div @click="goOrderInfo" class="order-card">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderCard',
  components: {},
  props: {
    orderId: {
      type: String,
      default: ''
    },
    orderType: {
      type: Number,
      default: 0
    },
    followId: {
      type: String,
      default: ''
    },
    orderMst: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {}
  },
  methods: {
    goOrderInfo () {
      this.$router.push({
        path: '/main/orderInfo',
        query: {
          orderId: this.orderId,
          orderType: this.orderType,
          followId: this.followId,
          orderMst: this.orderMst
        }
      })
    }
  }
}
</script>

<style lang="less">
.order-card{
  border: 1px solid #ddd;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .footer > *{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: grey;
  }
  & + .order-card{
    margin-top: 10px;
  }
}
</style>
